<%@page contentType="text/html" pageEncoding="UTF-8"%>

<style type="text/css" media="screen">
    #slider {
        width: 620px; /* important to be same as image width */
        height: 300px; /* important to be same as image height */
        position: relative; /* important */
        overflow: hidden; /* important */
    }

    #slider1Content {
        width: 620px; /* important to be same as image width or wider */
        position: absolute;
        top: 0;
        margin-left: 0;
    }
    .slider1Image {
        float: left;
        position: relative;
        display: none;
    }
    .clear {
        clear: both;
    }
    .slider1Image span strong {
        font-size: 14px;
    }
    ul { list-style-type: none;}
</style>
<script type="text/javascript" src="themes/skin_default/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="themes/skin_default/jquery/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 4000
        });
    });
</script>

<div id="slider">
    <ul id="slider1Content">
        <li class="slider1Image">
            <a href=""><img src="images//wide/1.jpg" alt="1" /></a>
            <span class="left"><strong>Title text 1</strong><br />Content text...</span></li>
        <li class="slider1Image">
            <a href=""><img src="images//wide/2.jpg" alt="2" /></a>
            <span class="right"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span></li>
        <li class="slider1Image">
            <img src="images//wide/3.jpg" alt="3" />
            <span class="right"><strong>Title text 2</strong><br />Content text...sdf</span></li>
        <li class="slider1Image">
            <img src="images//wide/4.jpg" alt="4" />
            <span class="left"><strong>Title text 2</strong><br />Content text...</span></li>
        <li class="slider1Image">
            <img src="images//wide/5.jpg" alt="5" />
            <span class="right"><strong>Title text 2</strong><br />Content text...11111</span></li>
    </ul>
    <div class="clear slider1Image"></div>
</div>